<template>
  <div class="box">
    <!-- <el-checkbox
      v-model="chooseAll"
      @change="chooseAllChange"
      style="float: left"
      >全选</el-checkbox
    > -->
    <div class="prev_top">
      分类管理
    </div>
    <div class="top">
      <div class="top_left">
        <el-button type="success" @click="add">新增</el-button>
        <el-button type="danger" @click="delCategorys">批量删除</el-button>
      </div>
      <div class="top_right">
        <el-input v-model="input" placeholder="请输入分类名称"></el-input>
        <el-button
            style="width: 100px; height: 40px; margin-left: 10px"
            type="success"
            @click="searchCategory"
        >搜索</el-button
        >
      </div>
    </div>

    <div class="container_center">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{
          background: '#C0C4CC',
          color: '#333333',
          height: '20px',
        }"
          @selection-change="handleSelectionChange"
      >
        <!-- :row-style="{ background: '#ededed' }" -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="分类id"> </el-table-column>
        <el-table-column prop="categoryName" label="分类名称"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="update(scope.row)" size="small"
            >修 改</el-button
            >
            <el-button type="danger" @click="delCategory(scope.row)" size="small"
            >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <el-table :data="tableData" scripe border style="width: 100%" height="500">
      <el-table-column fixed prop="id" label="选择" width="300">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isChoose"></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column fixed prop="id" label="标签id" width="300">
      </el-table-column>

      <el-table-column prop="Categoryname" label="标签名称" width="300">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" @click="update(scope.row)" size="small"
            >修 改</el-button
          >
          <el-button type="danger" @click="delCategory(scope.row)" size="small"
            >删 除</el-button
          >
        </template>
      </el-table-column>
    </el-table> -->

    <el-dialog title="修改标签" :visible.sync="showUpdateBox">
      <el-form :model="form">
        <el-form-item label="标签名" :label-width="200">
          <el-input v-model="form.categoryName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateBox = false">取 消</el-button>
        <el-button type="primary" @click="sendUpdate">确认修改</el-button>
      </div>
    </el-dialog>

    <el-dialog custom-class="addDialog" title="新增标签" :visible.sync="showAddBox">
      <el-form :model="form">
        <el-form-item label="标签名" labelWidth="50">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddBox = false">取 消</el-button>
        <el-button type="primary" @click="sendAdd">确认新增</el-button>
      </div>
    </el-dialog>
    <div class="pagination-container">
      <!--      <el-button type="primary" class="butT" @click="dialogFormVisible2 = true" style="float: left;margin-left: 30px">上传附件</el-button>-->
      <el-pagination
          style="margin-top: 20px;"
          class="pagiantion"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :page-sizes="[5 ,10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>



<script>
export default {
  async created() {
    this.getAllCategorys();
  },
  data() {
    return {
      pagination: {
        //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 10, //每页显示的记录数
        total: 0, //总记录数
        nTitle: "", //查询条件
      },
      showUpdateBox: false, //控制修改框的显示和隐藏
      showAddBox: false,
      tableData: [],
      form: {}, //待修改的标签对象
      chooseAll: false, //表示是否全选
      input: "",
      //   form:{
      //     Categoryname: ""
      //   }
      name:'',
      uids:null
    };
  },
  watch: {
    tableData: {
      handler() {
        //必须每个数据isChoose都为true，那么全选才会true
        //  let result = true;//假设是全选
        //  this.tableData.forEach(user=>{
        //   if(user.isChoose==false){
        //     result = false;
        //   }
        //  })
        //  this.chooseAll = result;

        this.chooseAll = this.tableData.every((Category) => Category.isChoose == true);
      },
      //开启深度监听
      deep: true,
    },
  },
  methods: {
    // 表格勾选钩子
    handleSelectionChange(val) {
      this.uids = val.map(item => {
        return item.id

      })
      console.log(val,'勾选的东西');
    },
    // 当前页改变的钩子
    handleCurrentChange(val){
      this.pagination.currentPage = val
      this.getAllCategorys()
    },
    // 每页条数改变触发的钩子
    handleSizeChange(){
      this.pagination.pageSize = val
      this.getAllCategorys()
    },
    async delCategory(obj) {
      // console.log('删除',obj);
      let res = await this.$http.CategoryHttp.delCategory(obj);
      console.log("删除结果", res);
      if (res.data.message == "删除成功") {
        //element提供的弹窗api
        this.$message({
          message: "删除成功",
          type: "success",
        });
        //重新获取数据
        this.getAllCategorys();
      }
    },
    async getAllCategorys() {
      // let obj = {
      //   pageNum:this.pagination.currentPage,
      //   pageSize:this.pagination.pageSize,
      //   categoryName:this.input
      // }
      // let res = await this.$http.CategoryHttp.getAllCategorys(obj);
        this.$axios.get("/Category/pagin?pageNum=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize +"&categoryName="+this.input).then((res) => {
        this.pagination.total = res.data.data.count;
        console.log("打印");
          this.tableData = res.data.data.list;
          this.pagination.total = res.data.data.count
        // console.log(this.tableData);

        // for(var i in this.tableData){
        //   this.tableData[i].nDate = this.tableData[i].nDate.substr(0,19)
        // }

      });
      //给每个用户对象添加是否被选中的状态，用于控制该用户在页面上的选中状态
      //   res.data.forEach((Category) => {
      //     //添加属性
      //     Category.isChoose = false;
      //   });

    },

    searchCategory() {
      this.pagination.pageNum = 1
      this.getAllCategorys()
      //   this.$axios
      //     .get(
      //       "/Category/pagin?Categoryname=" +
      //         this.input +
      //         "&pageNum=" +
      //         this.pagination.currentPage +
      //         "&pageSize=" +
      //         this.pagination.pageSize
      //     )
      //     .then((res) => {
      //       this.pagination.total = res.data.data.count;
      //       console.log("打印");
      //       this.tableData = res.data.data.list;
      // console.log(this.tableData);

      // for(var i in this.tableData){
      //   this.tableData[i].nDate = this.tableData[i].nDate.substr(0,19)
      // }
      // });
    },

    //全选改变
    chooseAllChange() {
      //将每个数据的isChoose改变
      this.tableData.forEach((Category) => {
        Category.isChoose = this.chooseAll;
      });
    },
    //批量删除
    async delCategorys() {
      let toDelCategorys = this.tableData.filter((Category) => Category.isChoose == true);
      let ids = toDelCategorys.map((Category) => Category.id);

      //批量删除
      let result = await this.$http.CategoryHttp.delCategorys({
        // ids:ids
        ids:this.uids,
      });
      if (result.data.data > 0) {
        this.$message({
          message: "批量删除成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "批量删除失败",
          type: "error",
        });
      }
      //重新获取数据并渲染
      this.getAllCategorys();
    },
    //点击修改按钮，弹出修改框，并回显数据
    update(Category) {
      this.showUpdateBox = true;
      this.form = Category;
    },
    async sendUpdate() {
      //确认修改
      let res = await this.$http.CategoryHttp.updateCategory(this.form);
      if (res.data.message == "修改成功") {
        this.$message({
          message: res.data.message,
          type: "success",
        });
        this.showUpdateBox = false;
        //修改成功，重置form对象，方便其他用户进行更新
        this.form = {};
      } else {
        this.$message({
          message: res.data.message,
          type: "error",
        });
      }
    },

    add() {
      this.showAddBox = true;
    },
    async sendAdd() {
      //确认新增
      let obj = {
        categoryName:this.name
      }
      let res = await this.$http.CategoryHttp.addCategory(obj);
      if (res.data.message == "新增成功") {
        this.$message({
          message: res.data.message,
          type: "success",
        });
        this.showAddBox = false;
        //修改成功，重置form对象，方便其他用户进行更新
        this.form = {};
      } else {
        this.$message({
          message: res.data.message,
          type: "error",
        });
      }
      this.getAllCategorys();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-main{
  line-height: 0px;
}
.box {
  .prev_top{
    margin-top: 10px;
    padding-left: 30px;
    font-size: 28px;
    text-align: left;
  }
  .top {
    display: flex;
    align-items: center;
    padding: 0px 32px;
    justify-content: space-between;
    margin-top: 40px;
    .top_left {
      display: flex;
      align-items: center;
    }
    .top_right {
      display: flex;
      align-items: center;
    }
  }
  .container_center{
    margin-top: 30px;
    padding: 0px 30px;
  }

}
::v-deep .addDialog{
  .el-input{
    width: 400px;
  }
  .el-input__inner{
    width: 400px;
  }
  .el-form-item__content{
    width: 460px;
  }
  .el-form-item{
    margin-left: 200px;
  }
}
</style>
